<template>
	<view>
		<view class="fixed-bg-blue">
			<cu-custom bgColor="bg-blue">
				<block slot="backText">
					<!-- #ifdef MP-ALIPAY -->
					<view class="margin-left-xl"></view>
					<!-- #endif -->
					<view class="cu-tag round text-black" @tap="open">
						<text class="cuIcon-locationfill margin-right-xs text-xs"></text>
						<text class="text">{{ city.cityName }}</text>
						<text class="cuIcon-triangledownfill"></text>
					</view>
					<view class="cu-tag round text-black" @tap="toPage('/pages/compare/compareList', false)"><text
							class="cuIcon-duibi margin-right-xs text-xs"></text>对比列表
						<view class="cu-tag badge">{{ compareItemCount || '0' }}</view>
					</view>
				</block>
			</cu-custom>
			<view class="padding text-center">
				<view class="radius-lg shadow shadow-lg bg-white padding-top-sm relative">
					<view class="cu-form-group solid-bottom">
						<view class="text-xxxl-important title">￥</view>
						<input placeholder="请输入税前工资" name="input" :value="totalAmount" type="digit"
							class="text-xxxl-important text-left text-bold" @blur="changeTotalAmount"
							@confirm="changeTotalAmount"></input>
						<button class='cu-btn bg-green shadow' @tap="showModalForCompare"
							data-target="新增对比项">加对比</button>
					</view>
					<view class="text-left margin-left-lg padding-tb-sm">
						税前工资金额
					</view>
				</view>
			</view>
		</view>
		<view class="cu-list menu sm-border card-menu shadow shadow-lg bg-white">
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-shebaochaxun text-olive"></text>
					<text class="text-grey">社保缴纳</text>
				</view>
				<view class="action">
					<text class="text-bold text-price text-lg">{{ socialSecurityInfo.personalAmount || '0' }}</text>
				</view>
				<view class="margin-left-sm text-blue" @click="toPage('/pages/social/social')">
					编辑<text class="cuIcon-right"></text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-gongjijinchaxun text-yellow"></text>
					<text class="text-grey">公积金缴纳</text>
				</view>
				<view class="action">
					<text class="text-bold text-price text-lg">{{ housingFundInfo.personalAmount || '0' }}</text>
				</view>
				<view class="margin-left-sm text-blue" @click="toPage('/pages/fund/fund')">
					编辑<text class="cuIcon-right"></text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-zhuanxiangkouchu text-cyan"></text>
					<text class="text-grey">专项扣除</text>
				</view>
				<view class="action">
					<text class="text-bold text-price text-lg">{{ specialDeductionAmount || '0' }}</text>
				</view>
				<view class="margin-left-sm text-blue" @click="toPage('/pages/home/specialDeduction')">
					编辑<text class="cuIcon-right"></text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-geshui_geshuiguanli text-pink"></text>
					<text class="text-grey">个税缴纳</text>
				</view>
				<view class="action">
					<text
						class="text-bold text-price text-lg">{{ taxCalcDetailList.length > 0 ? taxCalcDetailList[0].taxAmount : '0' }}</text>
				</view>
				<view class="margin-left-sm text-blue" @tap="() => taxModalVisible = true" data-target="个税规则表">
					详情<text class="cuIcon-right"></text>
				</view>
			</view>
		</view>

		<view class="radius-lg margin padding-sm shadow shadow-lg bg-white">
			<view class="flex justify-between align-center bg-white solid-bottom padding-bottom-sm padding-lr-xs">
				<view class="action text-bold">
					<text class="cuIcon-titles text-blue"></text>首月工资分布
				</view>
				<view class="action" @tap="toPage('/pages/home/salaryDetail')">
					<text class="text-gray">
						工资明细<text class="cuIcon-right"></text>
					</text>
				</view>
			</view>
			<view class="grid col-2">
				<view class="charts-box" style="height: 300upx">
					<!-- #ifdef MP-WEIXIN -->
					<qiun-data-charts :canvas2d="true" type="ring" :opts="opts" :chartData="chartData" />
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
					<!-- #endif -->
				</view>
				<view class="flex align-center justify-center text-left">
					<view>
						<view class="text-xxl text-bold padding-bottom-sm solids-bottom">首月到手工资</view>
						<view class="text-blue text-xxxl padding-top-xs text-bold text-price">
							{{ taxCalcDetailList.length > 0 ? taxCalcDetailList[0].earnedSalaryAmount : '0' }}
						</view>
					</view>
				</view>
			</view>
			<view class="flex text-center">
				<view class="flex-sub">
					<text class='cuIcon-title text-blue'></text>税后工资
				</view>
				<view class="flex-sub">
					<text class='cuIcon-title text-olive'></text>社保缴纳
				</view>
				<view class="flex-sub">
					<text class='cuIcon-title text-yellow'></text>公积金缴纳
				</view>
				<view class="flex-sub">
					<text class='cuIcon-title text-pink'></text>个税缴纳
				</view>
			</view>
		</view>

		<view class="margin padding-xs flex align-stretch bg-white radius-lg shadow shadow-lg">
			<view class="flex-sub margin-right-xs">
				<view class="cu-bar bg-gray radius-lg border margin-top-xs padding-sm" @tap="toPage('/pages/bound/yearEndBound')">
					<view>
						<view class="text-xxl text-bold text-black text-shadow" style="color: #555">年终奖</view>
						<view class="text-price margin-top-sm text-xl text-grey">
							{{ salarySummary.yearEndBoundAmount || '0' }}
						</view>
					</view>
					<view class="text-xxxl text-blue">
						<text class="cuIcon-moneybagfill"></text>
					</view>
				</view>
			</view>
			<view class="flex-sub" @tap="toPage('/pages/summary/summary')">
				<view class="cu-bar bg-gray radius-lg border margin-top-xs padding-sm">
					<view>
						<view class="text-xxl text-bold text-black text-shadow" style="color: #555">年度数据</view>
						<view class="text-price margin-top-sm text-xl text-grey">
							{{ salarySummary.summaryEarnedAmount || '0' }}
						</view>
					</view>
					<view class="text-xxxl text-blue">
						<text class="cuIcon-tongjifenxi"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="safe-bottom"></view>
		<cityPicker v-show="visible" :column="2" :default-value="cityCode" :mask-close-able="true" @confirm="confirm"
			@cancel="cancel" :visible="visible" />

		<tax-modal :cur-period-index="0" :modal-visible="taxModalVisible" @close="() => taxModalVisible = false" />

		<view class="cu-modal" :class="modalVisible?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">{{ modalName }}</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding" v-show="modalName === '新增对比项'">
					<form>
						<view class="cu-form-group margin-top">
							<view class="title">对比项名称</view>
							<input placeholder="请输入对比项名称" name="input" :value="compareName" class="text-left"
								@blur="changeCompareName"></input>
						</view>
					</form>

				</view>

				<view class="cu-bar bg-white justify-end" v-show="modalName === '新增对比项'">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="addCompareList">加入</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	import {
		mapActions
	} from 'vuex'
	import {
		appMixin
	} from '@/store/app-mixin'
	export default {
		data() {
			return {
				chartData: {},
				opts: {
					rotate: false,
					rotateLock: false,
					color: ["#0081ff", "#8dc63f", "#fbbd08", "#e03997", "#1cbbb4", "#39b54a"],
					padding: [5, 5, 5, 5],
					dataLabel: false,
					enableScroll: false,
					// #ifndef MP-ALIPAY
					update: true,
					// #endif
					legend: {
						show: false,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "到手工资",
						fontSize: 15,
						color: "#000"
					},
					subtitle: {
						name: "0%",
						fontSize: 20,
						color: "#0081ff"
					},
					extra: {
						ring: {
							ringWidth: 20,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							linearType: "custom"
						}
					}
				},
				taxModalVisible: false,
				modalVisible: false,
				modalName: '',
				city: {},
				visible: true,
				curTaxRateId: null,
				compareName: null, // 对比项名称 默认城市+工资
				compareItemCount: 0 // 对比项数目
			};
		},
		mixins: [appMixin],
		components: {
			cityPicker
		},
		watch: {
			calcResp() {
				this.initUcharts()
			}
		},
		mounted() {

		},
		onShow() {
			this.initUcharts()
		},
		created() {
			//#ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			//#endif
			this.setCompareItemCount()
		},
		methods: {
			...mapActions(['getSocialRate', 'calc', 'resetSocialSecurityFund']),
			/**
			 * 变更税前工资
			 */
			changeTotalAmount(e) {
				this.$store.commit('SET_TOTAL_AMOUNT', e.detail.value)
				this.calcSalary()
			},
			/**
			 * 计算税后薪资
			 */
			calcSalary() {
				// 判断是否选过城市、输入了金额
				if (this.cityCode && this.totalAmount) {
					const {
						calc
					} = this
					calc()
				}
			},
			/** 
			 * 展示添加对比项弹窗
			 * @param {Object} e 参数
			 */
			showModalForCompare(e) {
				if (this.totalAmount === null) {
					uni.showToast({
						title: '请输入税前工资',
						icon: 'none'
					})
					return;
				}
				this.compareName = this.city.cityName + '' + this.totalAmount
				this.modalVisible = true
				this.modalName = e.currentTarget.dataset.target
			},
			changeCompareName(e) {
				this.compareName = e.detail.value
			},
			/**
			 * 加入对比列表
			 */
			addCompareList() {
				if (this.totalAmount === null) {
					uni.showToast({
						title: '请输入税前工资',
						icon: 'none'
					})
					return;
				}
				let compareList = uni.getStorageSync('storage_compareList');
				if (compareList === null || compareList === '') {
					compareList = {}
				}
				compareList[this.compareName] = this.calcResp
				uni.setStorageSync('storage_compareList', compareList);
				this.modalVisible = false
				this.modalName = ''
				this.setCompareItemCount()
				uni.showToast({
					title: '添加成功',
					icon: 'none'
				})
			},
			setCompareItemCount() {
				let compareList = uni.getStorageSync('storage_compareList');
				if (compareList !== null && compareList !== '') {
					this.compareItemCount = Object.getOwnPropertyNames(compareList).length
				}
			},
			showModal(e) {
				this.modalVisible = true
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal() {
				this.modalVisible = false
				this.modalName = ''
			},
			open() {
				this.visible = true
			},
			confirm(val) {
				const {
					getSocialRate
				} = this
				// 判断是否是刷新页面
				if (this.city.code) {
					// 重置社保公积金基数
					this.resetSocialSecurityFund()
				}
				this.city = val
				this.visible = false
				this.$store.commit('SET_CITY_CODE', val.code)

				getSocialRate(val.code).then(() => {
					this.calcSalary()
				})
			},
			cancel() {
				this.visible = false
			},
			initUcharts() {
				const router = getCurrentPages()
				const curRoute = router[router.length - 1].route
				// 非本页加载图表，防止子页面变更数据刷新图片 导致图标不展示
				if (curRoute !== 'pages/home/home') {
					return;
				}
				let earnedSalaryAmount, socialSecurityPersonalAmount, housingFundPersonalAmount, taxAmount, proportion
				if (this.calcResp.totalAmount) {
					earnedSalaryAmount = this.taxCalcDetailList[0].earnedSalaryAmount
					socialSecurityPersonalAmount = this.socialSecurityInfo.personalAmount
					housingFundPersonalAmount = this.housingFundInfo.personalAmount
					taxAmount = this.taxCalcDetailList[0].taxAmount
					proportion = Math.round(earnedSalaryAmount / this.calcResp.totalAmount * 10000) / 100
					this.curTaxRateId = this.taxCalcDetailList[0].taxRateId
				}
				const chartData = [{
					name: '税后工资',
					value: earnedSalaryAmount || 0
				}, {
					name: '社保缴纳',
					value: socialSecurityPersonalAmount || 0
				}, {
					name: '公积金缴纳',
					value: housingFundPersonalAmount || 0
				}, {
					name: '个税缴纳',
					value: taxAmount || 0
				}]
				let res = {
					series: [{
						data: chartData
					}]
				};
				this.chartData = JSON.parse(JSON.stringify(res));
				this.opts.subtitle.name = (proportion || 0) + '%'
			},
			toPage(url, isCheck = true) {
				if (isCheck && this.totalAmount === null) {
					uni.showToast({
						title: '请输入税前工资',
						icon: 'none'
					})
					return;
				}
				uni.navigateTo({
					url: `${url}`
				})
			}
		}
	}
</script>

<style>

</style>